<template>
  <div class="unscramble">
    <headerNav></headerNav>

    <div class="swiper-container swiper-container-00">
      <div class="swiper-wrapper">
        <div class="swiper-slide item">#我的双旦美食vlog</div>
        <div class="swiper-slide item">#秀早餐</div>
        <div class="swiper-slide item">#秀午餐</div>
        <div class="swiper-slide item">#我心中的冬日限定</div>
      </div>
    </div>

    <div class="swiper-container swiper-container-01">
      <div class="swiper-wrapper">
        <div class="swiper-slide item">#集合！我的2021</div>
        <div class="swiper-slide item">#秀晚餐</div>
        <div class="swiper-slide item">#我的第1条笔记</div>
        <div class="swiper-slide item">#好人家当家料理</div>
        <div class="swiper-slide item more">查看更多</div>
      </div>
    </div>



    <div class="content">
      <!-- <div class="contain" v-if="notes">
        <div class="img" >
          <img :src="notes.activity.image" alt="" />
        </div>
        <div class="title">{{ notes.activity.name }}</div>
        <div class="info">
          <div class="left">
            <div class="user">
              <img :src="notes.activity.author.p" alt="" />
            </div>
            <div class="name">{{ notes.activity.author.n }}</div>
          </div>
          <div class="right">
            <i class="iconfont icon-bianji"></i>
            <div class="action_title">{{ notes.activity.action_title }}</div>
          </div>
        </div>
      </div> -->

      <div class="contain" v-for="(item, index) in notess" :key="index">
        <router-link tag="div" :to="'/note/notelist?id=' + item.note.id" class="img">
          <img :src="item.note.image_u" alt="" />
        </router-link>
        <div class="punch-the-clock" v-if="item.note.straight_text">
          <div class="bg">
            <i class="iconfont icon-sign-fill"></i>
          </div>
          <div class="day">{{ item.note.straight_text }}</div>
        </div>

        <div class="title">{{ item.note.title }}</div>
        <div class="info">
          <div class="left">
            <div class="user">
              <img :src="item.note.author.p" alt="" />
            </div>
            <div class="name">{{ item.note.author.n }}</div>
          </div>
          <div class="right">
            <i
              :class="[
                'iconfont',
                item.note.like_state == 0 ? 'icon-aixin' : 'icon-aixin1',
              ]"
              @click="toggle(index, item.note.like_state)"
            ></i>
            <div class="num">{{ item.note.like_count }}</div>
          </div>
        </div>
      </div>
    </div>

    
    <van-loading v-if="!notess" size="30px" vertical>加载中...</van-loading>

    <footNav> </footNav>
  </div>
</template>

<script>
import footNav from "../base/footNav.vue";
import headerNav from "../base/headerNav.vue";
import Swiper from "swiper";

import { getNotes } from "../../api/home";

import Vue from "vue";
import { Loading } from "vant";
Vue.use(Loading);

export default {
  data() {
    return {
      icon: true,
      notes: [],
      notess: [],
    };
  },

  methods: {
    getNotesFun() {
      getNotes().then((data) => {
        data.result.list.forEach((item) => {
          if (item.type == 1) {
            var i = item;
            this.notess.push(i);
          } else if (item.type == 2) {
            var j = item;
            this.notes = j;
          }
        });
        console.log(this.notes);
        console.log(this.notess);
      });
    },
    toggle(index, like_state) {
      if (like_state == 0) {
        this.notess[index].note.like_state = 1;
        this.notess[index].note.like_count += 1;
      } else {
        this.notess[index].note.like_state = 0;
        this.notess[index].note.like_count -= 1;
      }
    },
  },
  created() {
    this.getNotesFun();
  },

  components: {
    headerNav,
    footNav,
  },
  mounted() {
    new Swiper(".swiper-container-00", {
      pagination: ".swiper-pagination-00",
      slidesPerView: "auto",
      paginationClickable: true,
      observer: true,
      observeParents: true,

      freeMode: true,
    });
    new Swiper(".swiper-container-01", {
      pagination: ".swiper-pagination-00",
      slidesPerView: "auto",
      paginationClickable: true,
      observer: true,
      observeParents: true,
      freeMode: true,
    });
  },
};
</script>


<style lang="less">
.unscramble {
  .swiper-container-01 {
    margin-bottom: 10px;
  }
  .swiper-container {
    margin-top: 12px;
    margin-left: 5px;
    .swiper-wrapper {
      .item {
        background: #effafc;
        height: 32px;
        line-height: 32px;
        color: #5f7f83;
        font-size: 10px;
        text-align: center;
        margin-right: 8px;

        border-radius: 20px;
        padding: 0 12px;
        width: auto;
      }
      .more {
        border: 1px solid #5f7f83;
      }
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    .contain {
      margin-left: 5px;
      margin-bottom: 15px;

      width: 48%;
      .img {
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 250px;
        }
      }
      .punch-the-clock {
        padding: 0 7px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .bg {
          position: relative;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #357c70;
          i {
            position: absolute;
            top: 1px;
            left: 2px;
            font-size: 6px;
            color: #fff;
          }
        }
        .day {
          color: #959695;
          font-size: 10px;
          margin-left: 3px;
        }
      }
      .title {
        padding: 0 7px;
        font-size: 12px;height: 35px;
    overflow: hidden;
        color: #050505;
        margin-bottom: 10px;
      }
      .info {
        padding: 0 7px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .user {
            width: 15px;
            height: 15px;
            background: #f9ca75;
            border-radius: 50%;
            img {
              width: 15px;
              height: 15px;
              border-radius: 50%;
            }
          }
          .name {
            margin-left: 3px;
            font-size: 10px;
            color: #9f9f9f;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .icon-aixin {
            font-weight: bold;
            color: #9f9f9f;
          }
          .icon-aixin1 {
            color: #e41b2d;
          }
          .icon-bianji {
            color: #426970;
          }
          .num {
            margin-left: 3px;
            line-height: 4px;
            color: #9f9f9f;
            font-size: 10px;
          }
          .action_title {
            color: #282828;
            margin-left: 3px;
            line-height: 4px;
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>